<template>
	<!-- <view class=""> -->
	<!-- <u-loading size="36" :show="true"></u-loading> -->
	<view class="goods_details" v-if="isDetails">
		<view class="" :style="{height: naviBarHeight}">
		</view>
		<view class="swiper_box">
			<view class="back_icon" @click="handGoBack">
				<u-icon color="#fff" name='arrow-left'></u-icon>
			</view>
			<view @click="handShare" class="share_icon" style="right: 27rpx;">
				<u-icon color="#fff" name='share'></u-icon>
			</view>
			<u-swiper @click="handBgImg" :list="details.goodsPictures" mode='number' indicator-pos='bottomRight'
				height='662'>
			</u-swiper>
		</view>
		<u-cell-group>
			<u-cell-item @click='handNavTo()' :title-style="{fontWeight:'600'}" :title="details.appBusiness.address">
				<view class="address_box" slot="right-icon">
					<u-icon name="map" color="#fff"></u-icon>
					<view class="title">
						地址
					</view>
				</view>
			</u-cell-item>
		</u-cell-group>
		<view class="goods_msg">
			<view class="pic_box">
				<view class="pic">
					<view class="num">
						￥{{details.price}}起
					</view>
					<view class="line">
						￥{{details.originalPrice}}起
					</view>
				</view>
				<view class="sold_num">
					已卖{{details.salesVolume}}件
				</view>
			</view>
			<view class="goods_title">
				{{details.title}}
				<!-- <u-tag style="margin-left: 10rpx;" text="新品" size="mini" mode='dark' /> -->
			</view>
		</view>
		<view class="integral_box u-border-bottom u-border-top">
			<view class="int_item">
				<image class="icon" src="../../../static/img/jifen-icon.png" mode=""></image>
				<view class="title">
					可得{{details.bonusPoints}}积分
				</view>
			</view>
			<u-line style="margin: 0 80rpx;" color='#bbb' length='59' direction='col'></u-line>
			<view class="int_item">
				<image class="icon" src="../../../static/img/jifen-icon.png" mode=""></image>
				<view class="title">
					可用积分{{details.integral}}
				</view>
			</view>
		</view>
		<view class="welfare_box u-border-bottom">
			{{details.deliverPlace}} · {{details.post==1?'全场包邮':'邮费:'+details.postAge}} · 七天无理由退货
		</view>
	
		<u-gap height="14" bg-color="#ECECEC"></u-gap>
		<view class="evaluate_box u-border-bottom">
			<view class="eva_num">
				商品评价（{{details.goodsCommentsCount}}）
			</view>
		
		</view>
		<view class="eva_list">
			<view class="eva_item u-border-bottom" v-for="(item,index) in details.goodsComments" :key='index'>
				<view class="eva_head">
					<image class="img" :src="item.handlUrl" mode=""></image>
					<view class="title">
						{{item.nickName}}
					</view>
				</view>
				<view class="eva_content">
					{{item.comment}}
				</view>
			</view>
		</view>
		<u-gap height="14" bg-color="#ECECEC"></u-gap>
		
		<u-row gutter="16" justify="start">
			<u-col @click="handGoodsNavTo(item)" span="4" class="goods_item"
				v-for="(item,index) in details.goodsInfoListVos" :key='index'>
				<view>
					<u-image width="223rpx" height="223rpx" :src="item.imgUrl">
					</u-image>
					<view class="title">
						{{item.title}}
					</view>
					<view class="pic_box">
						<view class="pic">
							¥{{item.price}}
						</view>
						<view class="num">
							已卖{{item.salesVolume}}件
						</view>
					</view>
				</view>
			</u-col>
		</u-row>
		<u-gap height="14" bg-color="#ECECEC"></u-gap>
		<view class="details_box"
			v-if="details.goodsInfoDetailsVo.goodsInfoParam&&details.goodsInfoDetailsVo.goodsInfoParam.length!==0">
			<view class="title">
				商品详情
			</view>
			<view class="list">
				<view class="item" v-for="item in details.goodsInfoDetailsVo.goodsInfoParam">
					<view class="item_title">
						{{item.paramName}}
					</view>
					<view class="summary">
						{{item.paramValue}}
					</view>
				</view>
			</view>
		</view>
		<u-gap height="2" marginTop="20rpx" bg-color="#ECECEC"></u-gap>
		<view class="details_box"
			v-if="details.goodsInfoDetailsVo&&details.goodsInfoDetailsVo.goodsVideo&&details.goodsInfoDetailsVo.goodsVideo.videoUrl">
			<view class="title">
				生产视频
			</view>
			<!-- skuKey打开规格的时候隐藏视频,权重太高会盖住规格弹框 -->
			<video v-if="details.goodsInfoDetailsVo.goodsVideo&&!skuKey" style="width: 100%;height: 402rpx;"
				:src="details.goodsInfoDetailsVo.goodsVideo.videoUrl" controls></video>
		</view>
		<view class="details_box"
			v-if="details.goodsInfoDetailsVo.goodsInfoPictures&&details.goodsInfoDetailsVo.goodsInfoPictures.length!==0">
			<view class="title">
				详情图
			</view>
			<!-- <image src="" mode=""></image> -->
			<u-image style="margin-bottom: 10rpx;" mode="widthFix"
				v-for="(item,index) in details.goodsInfoDetailsVo.goodsInfoPictures" width="100%" height="100%"
				:src="item.imgUrl"></u-image>
		</view>
		<!-- </view> -->
	</view>
</template>

<script>
	var that;
	export default {
		components: {
		},
		data() {
			return {
				// 是否打开SKU弹窗
				skuKey: false,
				// SKU弹窗模式
				skuMode: 3,
				// 后端返回的商品信息
				goodsInfo: {},
				shareShow: false,
				details: {
					goodsInfoListVos: [],
					appBusiness: {},
					goodAttrDetailed: {},
					goodsComments: [],
					goodsInfoDetailsVo: {
						goodsInfoParam: [],
						goodsVideo: {},
						goodsInfoPictures: []
					}
				},
				id: '',
				specList: [],
				isDetails: false
			};
		},
		computed: {

		},
		onLoad(e) {
			that = this;
			this.id = e.id
			this.init()
		},

		methods: {
			// 查看大图
			handBgImg(index) {
				// details.goodsPictures
				uni.previewImage({
					current: index, //预览图片的下标
					urls: this.details.goodsPictures.map(item => item.imgUrl) //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			handLive() {
				// roomId streamId
				this.details.appBusiness.isFollow = this.details.isFollow
				uni.navigateTo({
					url: `/pages/videoPage/videoPage?roomId=${this.details.roomId}&playStreamID=${this.details.streamId}&goodsDetails=${JSON.stringify(this.details)}`
				})
			},
			navToUstomerService() {
				uni.navigateTo({
					url: '/pages/chat/chat?businessId=' + this.details.businessId + '&audioName=' + this.details
						.appBusiness
						.name + '&goodsItem=' + JSON.stringify(this.details)
				})
			},
			handGoodsNavTo(item) {
				uni.navigateTo({
					url: '/pages/followShop/goodsDetail/goodsDetail?id=' + item.id,
				})
			},
			handAllComment() {
				uni.navigateTo({
					url: '/pages/goodsComment/goodsComment?id=' + this.id
				})
			},
			// 收藏
			addGoodsCollection() {
				this.$u.api.addGoodsCollection({
					id: this.id,
					// isCollection: this.details.isCollection == 1 ? 0 : 1
				}).then(res => {
					console.log(res, 'res')
					// this.init()
					const msg = this.details.isCollection == 1 ? '取消收藏' : '收藏成功'
					uni.showToast({
						title: msg,
						icon: 'none'
					})
					this.details.isCollection = this.details.isCollection == 1 ? 0 : 1
				})
			},
			getGoodsAttr() {
				this.$u.api.getGoodsAttr({
					id: this.id
				}).then(res => {

					this.specList = res.map(item => {
						return {
							name: item.parentAttr.typeName,
							list: item.goodsAttr.map(m => {
								return {
									name: m.typeName
								}
							})
						}
					})
					console.log(this.specList, '规格')
					this.goodsAttr = res
				})
			},
			init() {

				this.$u.api.getGoodsById({
					id: 1
				}).then(res => {
					res.goodsPictures = res.goodsPictures.map(item => {
						return {
							...item,
							image: item.imgUrl
						}
					})
					// res.appBusiness.stock = res.goodAttrDetailed.stock
					this.details = res
					// this.skuList = res.goodAttrDetaileds.map(item => {
					// 	return {
					// 		goods_name: item.goodName,
					// 		_id: item.id,
					// 		goods_id: item.goodId,
					// 		price: item.price,
					// 		stock: item.stock,
					// 		sku_name: item.attrName,
					// 		sku_name_arr: item.attrName.split(','),
					// 		image: item.mainImg
					// 		// name: item.parentAttr.typeName,

					// 	}
					// })
					// console.log(res, '详情')
					// // 
					// console.log(this.skuList, '详情规格')
					// this.isDetails = true
				})

			},
			findGoodsInfo() {
				return new Promise(function(resolve, reject) {
					// 此处写接口请求，并将返回的数据进行处理成goodsInfo的数据格式，
					// 并执行resolve(goodsInfo);
					// goodsInfo是后端返回的数据
					let goodsInfo = {
						"_id": that.details.id,
						"name": that.details.title,
						"goods_thumb": that.details.imgUrl,
						"sku_list": that.skuList,
						"spec_list": that.specList

					};
					resolve(goodsInfo);

				});
			},
			submit() {
				console.log('???')
				/**
				 * 获取商品信息
				 * 这里可以看到每次打开SKU都会去重新请求商品信息,为的是每次打开SKU组件可以实时看到剩余库存
				 */
				// 此处写接口请求，并将返回的数据进行处理成goodsInfo的数据格式，
				// goodsInfo是后端返回的数据

				this.skuKey = true;
				// uni.navigateTo({
				// 	url: '/pages/order/order'
				// })
			},
			handShare() {
				this.shareShow = true
			},
			handLook() {
				uni.navigateTo({
					url: '/pages/shopDetail/shopDetail?id=' + this.details.appBusiness.id
				})
			},
			handNavTo() {
				// details.appBusiness
				const {
					lng,
					lat
				} = this.details.appBusiness
				uni.openLocation({
					latitude: parseFloat(lat), //------》传入的经纬度必须是浮点数， 不能传入字符串，否则地图打不开
					longitude: parseFloat(lng),
					scale: 18
				})
				// uni.navigateTo({
				// 	url: '/pages/mapList/mapList'
				// })
			},
			handGoBack() {
				uni.navigateBack()
			},
			// sku组件 开始-----------------------------------------------------------
			openSkuPopup() {
				console.log("监听 - 打开sku组件");
			},
			closeSkuPopup() {
				console.log("监听 - 关闭sku组件");
			},
			// 加入购物车前的判断
			addCartFn(obj) {
				let {
					selectShop
				} = obj;
				// 模拟添加到购物车,请替换成你自己的添加到购物车逻辑
				let res = {};
				let name = selectShop.goods_name;
				if (selectShop.sku_name != "默认") {
					name += "-" + selectShop.sku_name;
				}
				res.msg = `${name} 已添加到购物车`;
				if (typeof obj.success == "function") obj.success(res);
			},

			// 立即购买
			buyNow(selectShop) {

				this.specList.forEach((item, index) => {
					item.attrName = selectShop.sku_name_arr[index]
				})
				console.log("监听 - 立即购买", this.specList);
				const that = this
				this.details.selectShop = selectShop
				that.addCartFn({
					selectShop: selectShop,
					success: function(res) {
						const order = {
							...that.details,
							specList: that.specList,
							appBusinessName: that.details.appBusiness.name,
							skuName: selectShop.sku_name,
							skuPrice: selectShop.price,
							appBusinessImg: that.details.appBusiness.imgUrl,
							buyNum: selectShop.buy_num,
							buyStock: selectShop.stock
						}
						// 实际业务时,请替换自己的立即购买逻辑
						uni.navigateTo({
							url: '/pages/submitOrder/submitOrder?details=' + JSON.stringify(order)
						})
						// that.toast("立即购买");
					}
				});
			},
			toast(msg) {
				uni.showToast({
					title: msg,
					icon: "none"
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods_details {
		padding-bottom: 200rpx;
	}

	.details_box {
		padding: 0 20rpx;
		height: 100%;

		.list {
			padding: 30rpx;
			background-color: #F0F0F0;
			margin-bottom: 20rpx;

			.item {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.summary {
					color: #000000;
					font-size: 28rpx;
					margin-left: 90rpx;
				}

				.item_title {
					color: #919191;
					font-size: 28rpx;

				}
			}
		}

		.title {
			padding: 24rpx 0;
			font-size: 30rpx;
			color: #000000;
		}
	}

	.goods_item {
		display: flex;
		flex-direction: column;
		margin-bottom: 23rpx;

		.pic_box {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;

			.num {
				font-size: 22rpx;
				color: #A8A8A8;
			}

			.pic {
				font-size: 20rpx;
				color: $u-type-primary;
			}
		}

		.title {
			margin: 15rpx 0;
			color: #000000;
			font-size: 26rpx;
			@include ellipsisMultiline(1)
		}

	}

	.eva_list {
		display: flex;
		flex-direction: column;

		.eva_item {
			padding: 24rpx;
			display: flex;
			flex-direction: column;

			.eva_content {
				color: #888888;
				font-size: 26rpx;
				margin-top: 15rpx;
				@include ellipsisMultiline(2);
			}

			.eva_head {
				display: flex;
				align-items: center;

				.title {
					font-size: 26rpx;
					color: #000000;
				}

				.img {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					margin-right: 14rpx;

				}

			}


		}
	}

	.evaluate_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;

		.eva_num {
			font-size: 30rpx;
			color-profile: #000000;
		}

		.eva_all {
			display: flex;
			align-items: center;
			color: #9B9B9B;
			font-size: 24rpx;
		}
	}

	.arrow_up {
		transform: rotate(90deg);
	}

	.live_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;

		.live_left {
			display: flex;

			.live_title {
				font-size: 26rpx;
				color: #808080;
			}

			.live_icon {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: $u-type-primary;
				border-radius: 20rpx;
				width: 86rpx;
				color: #fff;
				font-size: 20rpx;
				margin-right: 14rpx;
			}
		}
	}

	.welfare_box {
		font-size: 26rpx;
		color: #575757;
		padding: 28rpx 24rpx;


	}

	.integral_box {
		padding: 24rpx;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		height: 100%;

		.int_item {
			display: flex;
			align-items: center;

			.title {
				color: #575757;
				font-size: 26rpx;
			}

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;

			}
		}
	}

	.goods_msg {
		display: flex;
		flex-direction: column;
		// justify-content: space-between;
		padding: 30rpx 24rpx;

		.goods_title {
			font-size: 30rpx;
			font-weight: 600;
			color: #000000;
		}

		.pic_box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 27rpx;

			.pic {
				display: flex;
				align-items: flex-end;

				.line {
					text-decoration: line-through;
					font-size: 24rpx;
					color: #808080;
				}

				.num {
					color: $u-type-primary;
					font-size: 34rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.address_box {
		background-color: #B7B7B7;
		width: 131rpx;
		height: 46rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.title {
			font-size: 28rpx;
			color: #fff;
		}
	}

	.swiper_box {
		position: relative;
		height: 662rpx;

		.back_icon {
			position: absolute;
			top: 50rpx;
			left: 27rpx;
			z-index: 999;
			width: 58rpx;
			height: 58rpx;
			border-radius: 50%;
			background-color: #989898;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.share_icon {
			right: 27rpx;
			position: absolute;
			top: 50rpx;
			z-index: 999;
			width: 58rpx;
			height: 58rpx;
			border-radius: 50%;
			background-color: #989898;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
